<template>
	<view class="zg-area">
		<view class="area-1" v-if="Object.keys(details2).length > 0" @click="goRouter1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>
						<view class="">
							<text>{{details2.name || ''}}</text>
							<text>{{details2.phone || ''}}</text>
						</view>
						<view class="">
							<text>{{details2.province || ''}}{{details2.city || ''}}{{details2.area || ''}}</text>
						</view>
						<view class="">
							<text>{{details2.address || ''}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="area-1" v-else @click="goRouter2">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>请添加收货地址</view>
				</view>
			</view>
			<view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="area-2">
			<view class="area-2-card" v-for="item in nowmyshop" :key='item.id'>
				<view class="a2c-title">
					<image v-if="item.scCover" :src="wwwImgUrl + item.productPic" mode="widthFix"></image>
					<image v-else class="tp-img32" src="../static/shop.png" mode="widthFix"></image>
					<text class="tp-fz28 tp-fc333">{{item.shopName || ''}}</text>
				</view>
				<view class="a2c-content">
					<view class="a2c-img">
						<image :src="wwwImgUrl + item.productPic" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title tp-fc333 tp-fz26 tp-fw600">
							{{item.productName || ''}}
						</view>
						<view class="a2c-info1" >
							<text v-for="(ite,index) in item.productAttr" :key='index'>{{ite.specification}}{{ite.value}}</text>
						</view>
						<view class="a2c-info2">
							<view class="a2c-info-price">
								<text class="tp-fz24 flex align_baseline tp-red">￥<text class="tp-fz34">{{item.productPrice || 0}}</text></text>
							</view>
							<view class="a2c-info-num tp-fz28">
								<text>x{{item.quantity || 1}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					优惠券
				</view>
				<view class="a2r-right" @click="openP2">
					<text class="tip-text">{{couponMoney ? `-${couponMoney || 0}元` : '请选择'}}</text>
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					运费
				</view>
				<view class="a2r-right">
					<text>{{postage || 0}}元</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					合计
				</view>
				<view class="a2r-right">
					<text class="a2r-price">￥{{allMoney || 0}}</text>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom">
			<view class="ftb-l">
				<text>合计：</text>
				<text class="ftb-price">￥{{allMoney || 0}}</text>
			</view>
			<view class="ftb-r">
				<button plain @click="createOrder">提交订单</button>
			</view>
		</view>
		<uni-popup type="bottom" ref="p2" :maskClick="false">
			<view class="sp-a">
				<image class="sp-a-close" @click="closeP2" src="/pagesShop/static/close.png" mode=""></image>
				<view class="sp-a2-title">优惠券</view>
				<view class="sp-a2-content">
					<view class="" style="margin: 0 auto;width: 100%;height: 100%;" v-if="list2.length == 0">
						暂无可用优惠劵
					</view>
					<scroll-view scroll-y style="height: 200px;">
						<view class="sp-a2-row" v-for="(item,index) in list2" :key="index" @click="selectYHQ(item)">
							<view class="sp-a2-left">
								<view class="sp-a2-price">
									<text>￥</text>
									<text>{{item.amount || 0}}</text>
								</view>
								<view class="sp-a2-type">
									<!-- <view v-if="item.type === '1'" @click="action1.stop(item)">立即领取</view>
									<text v-else>已领取</text> -->
								</view>
							</view>
							<view class="sp-a2-right">
								<view class="sp-a2-info1">
									满{{item.fullAmount || 0}}减{{item.amount || 0}}
								</view>
								<view class="sp-a2-info2">
									有效期：{{item.startTime || ''}} — {{item.endTime || ''}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<CommonPaySecond ref="commonPay" :price="allMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				id: '',  // 订单id
				specification: {}, // 商品属性
				details: {}, // 商品详情
				details2: {}, // 默认地址
				list2:[], // 优惠券列表
				couponId: '', // 优惠券id
				couponMoney: '', // 优惠券金额
				oid:'',//订单号
				
				selected_list:'',// 购物车多个ids
				nowmyshop:[],//购车商品列表
				postage:'',//运费
				allMoney:'',//总价
			}
		},
		computed:{
			orderInfo() {
				let o = {
					orderNo: this.oid,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onReady() {
			// 去添加地址
			uni.$on('add-address',data => {
				this.details2 = data
			})
			// 去选择地址
			uni.$on('select-address',data => {
				this.details2 = data
			})
		},
		onLoad() {/* 
			console.log(params);
			this.cid = params.cid // 商品id
			this.price = parseFloat(params.price) || 0 // 商品价格
			try {
				this.specification = JSON.parse(params.specification) // 商品属性
			} catch(e) {
				console.error("商品数据错误");
			} */
			// this.getDetails1()
			
			this.nowmyshop = this.$store.getters.getnowmyshop
			this.selected_list = this.$store.getters.getselected_list
			this.getDetails2()
			this.getList3()
			this.getCartPostage()
			
		},
		watch:{
			couponMoney:'totalMoney'
		},
		methods:{
			//价格计算
			totalMoney() {
				// return parseFloat((this.price * this.specification.quantity + this.details.postage - this.couponMoney).toFixed(2))   ;
				let money = 0;
				this.nowmyshop.forEach(item => {
					money += (item.productPrice * item.quantity)
					console.log(money,'价格')
				})
				this.allMoney = money + parseFloat(this.postage)
				if(this.couponMoney){
					this.allMoney = this.allMoney - this.couponMoney
				}
				this.allMoney = parseFloat((this.allMoney).toFixed(2))
				console.log(this.allMoney,'价格1')
			},
			openP2() {
				this.$refs.p2.open()
			},
			closeP2() {
				this.$refs.p2.close()
			},
			// 选择优惠券
			selectYHQ(item) {
				console.log(item,'选择的')
				if (/* this.trunNumber(item.fullAmount) > this.trunNumber(this.price) * this.trunNumber(this.specification.quantity) + this.postage */
				this.allMoney < item.fullAmount
				) {
					uni.showToast({
						title:`付款金额必须达到${item.fullAmount}元`,
						icon:'none'
					})
					return
				} /* else if(this.trunNumber(item.amount) > this.trunNumber(this.price) * this.trunNumber(this.specification.quantity) + this.postage) {
					uni.showToast({
						title:`付款金额不能小于${item.amount}元`,
						icon:'none'
					})
					return
				}  */
				this.couponId = item.id
				this.couponMoney = item.amount
				this.closeP2()
			},
			//查询购物车运费
			getCartPostage(){
				let shop_ids = []
				this.nowmyshop.forEach(item => {
					shop_ids.push(item.shopId)
				})
				for (let i = 0; i < shop_ids.length; i++) {
				for (let j = i + 1; j < shop_ids.length; j++) {
					if (shop_ids[i] === shop_ids[j]) {
						shop_ids.splice(j, 1)
						j = j - 1;
					}
				}
			}
				this.$http.post(this.$api.getCartPostage, {},{
						params: {
							ids: shop_ids.join(','), // 店铺ids
							}
						}).then(res => {
					if(res.code == 200){
						this.postage = res.data.postage
						this.totalMoney()
					}
				})
			},
			// 查询购物车优惠券
			getList3() {
					let shop_ids = []
					this.nowmyshop.forEach(item => {
						shop_ids.push(item.shopId)
					})
				for (let i = 0; i < shop_ids.length; i++) {
					for (let j = i + 1; j < shop_ids.length; j++) {
						if (shop_ids[i] === shop_ids[j]) {
							shop_ids.splice(j, 1)
							j = j - 1;
						}
					}
				}
					this.$http.post(this.$api.shop_trolly, {}, {
						params: {
							ids: shop_ids.join(','), // 店铺ids
						}
					}).then(result => {
						if (result.code === 200) {
							const list = result.data;
							if (Array.isArray(list)) {
								this.list2 = list
								console.log(this.list2,'康康优惠劵')
							} else {
								this.list2 = []
							}
						} else {
							this.list2 = []
						}
					}).catch(() => {
						this.list2 = []
					})
				
			},
			// 根据商品id查询商品详情
			/* getDetails1() {
				this.details = []
				this.$http.post(this.$api.shop_details_1, {}, {
					params: {
						id: this.cid,
					}
				}).then(result => {
					if (result.code === 200) {
						this.details = result.data;
					} else {
						this.details = {}
					}
				}).catch(() => {
					this.details = {}
				})
			}, */
			// 获取默认收货地址
			getDetails2() {
				this.$http.post(this.$api.shop_order_6).then(result => {
					if (result.code === 200) {
						this.details2 = result.data
					} else {
						this.details2 = {}
					}
				}).catch(() => {
					this.details2 = {}
				})
			},
			// 生成订单
			createOrder() {
				if(!this.details2.id) {
					uni.showToast({
						title:'缺少收获地址',
						icon:'none'
					})
					return
				}
				const _this = this
				this.$http.post(this.$api.shop_list_6, {
					cartItems: this.selected_list, // 购物车多个ids
					couponId: this.couponId, // 优惠券领取id
					addressId: this.details2.id, // 地址id
				}).then(res => {
					if(res.code == 200){
						_this.$refs.commonPay.show()
						_this.oid = res.data.orderNs
						_this.id = res.data.id
					}
				})
			},
			// 积分支付成功
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.oid + '&payType=0&sourceType=0&payPassword=' + pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.oid + '&payType=3&sourceType=2&payPassword=' + pwd
				// #endif
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: `/pagesShop/order/wait_order?oid=${this.oid}&id=${this.id}`
							});
						},600)
					} else {
						uni.showToast({
							title:'支付失败',
							icon: 'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: `/pagesShop/order/wait_order?oid=${this.oid}&id=${this.id}`
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				 setTimeout(() => {
					uni.redirectTo({
						url: `/pagesShop/order/wait_order?oid=${this.oid}&id=${this.id}`
					});
				},600) 
			},
			// 选择地址
			goRouter1() {
				uni.navigateTo({
					url:'/pagesUser/addressList'
				})
			},
			// 添加地址
			goRouter2() {
				uni.navigateTo({
					url:'/pagesUser/addressEdit'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}
	
	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		view {
			flex-shrink: 0;
			width: 40rpx;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}
	
	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}
	
	.pr2-left {
		display: flex;
		align-items: center;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
	
	.pr2-right {
		display: flex;
		align-items: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}
	
	.pay-row3 {
		padding: 60rpx 30rpx;
		
		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}
	
	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.area-1-left {
		display: flex;
		align-items: center;
		color: #666;
		
		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
	
	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			
			
			&:nth-of-type(1) {
				font-size: 28rpx;
				color: #333333;
				text {
					margin-right: 20rpx;
				}
			}
			
			&:nth-last-of-type(1) {
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 0
			}
		}
	}
	
	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;
		
		image {
			width: 14rpx;
			height: auto;
		}
	}
	
	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 0 20rpx 30rpx 20rpx;
	}
	
	.area-2-card {
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}
	
	.a2c-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: #333333;
		margin-bottom: 20rpx;
		
		image {
			width: 30rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
	
	.a2c-content {
		display: flex;
	}
	
	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 12rpx;
		}
	}
	
	.a2c-info {
		flex-grow: 1;
	}
	
	.a2c-info-title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;
		
		text {
			margin-right: 10rpx;
		}
	}
	
	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}
	
	.area-2-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0;
	}
	
	.a2r-left {
		font-size: 28rpx;
	}
	
	.a2r-right {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		
		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}
	
	.a2r-tip {
		color: #999;
	}
	
	.a2r-price {
		color: $uni-color-error;
	}
	
	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	
	.ftb-l {
		display: flex;
		align-items: center;
	
		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}
	
	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	
		button {
			background-color: #FFAF3C;
			color: #fff;
			font-size: 26rpx;
			padding: 20rpx 60rpx;
			border-radius: 10rpx;
		}
	}
	.sp-a2-title {
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
	}
	
	.sp-a2-content {
		padding: 10rpx 0;
	}
	
	.sp-a2-row {
		display: flex;
		align-items: center;
	
		&:not(:nth-last-of-type(1)) {
			margin-bottom: 20rpx;
		}
	}
	
	.sp-a2-left {
		width: 200rpx;
		height: 190rpx;
		margin-right: 30rpx;
		background-color: #ff660a;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.sp-a2-price {
		// margin-bottom: 20rpx;
	
		text {
			&:nth-of-type(1) {
				font-size: 32rpx;
			}
	
			&:nth-of-type(2) {
				font-size: 50rpx;
			}
		}
	}
	
	.sp-a2-type {
		font-size: 24rpx;
	
		text {
			display: block;
			padding: 8rpx 30rpx;
		}
	
		view {
			border: 1px solid #fff;
			padding: 8rpx 20rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
		}
	}
	

	.sp-a2-info1 {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.sp-a2-info2 {
		font-size: 24rpx;
		color: #666;
	}
	
	.sp-a-4 {
		padding: 30rpx;
	
		button {
			background-color: $uni-color-error;
			color: #fff;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44px;
		}
	}
	
	.sp-a {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx 12rpx 0 0;
		position: relative;
	}
	
	.sp-a-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.sp-a-1 {
		display: flex;
		justify-content: space-between;
	}
	
	.spa1-left {
		display: flex;
		align-items: center;
	}
	
	.spa1-right {
		display: flex;
		align-items: flex-start;
	
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
	
	.spa1-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	
		image {
			width: 100%;
			height: auto;
		}
	}
	

	.sp-a-2 {
		border-bottom: 1px solid #ebebeb;
	}
	
	.spa2-title {
		font-size: 28rpx;
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
	}
	
	.spa2-jbq {
		display: flex;
	
		image {
			width: auto;
			height: 40rpx;
		}
	
		input {
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			background-color: #ebebeb;
			min-height: auto;
			font-size: 24rpx;
		}
	}
	
	.spa2-content {
		display: flex;
		flex-wrap: wrap;
	}
	
	.spa2-tag {
		font-size: 28rpx;
		padding: 6rpx 20rpx;
		background-color: #ebebeb;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;
	
		&.active {
			background-color: #ffe8e6;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
		}
	}
	
	.spa1-price {
		text {
			&:nth-of-type(1) {
				font-size: 36rpx;
				color: $uni-color-error;
				font-weight: bold;
			}
	
			&:nth-of-type(2) {
				margin-left: 20rpx;
				font-size: 24rpx;
				text-decoration: line-through;
				color: #999;
			}
		}
	}
	
	.spa1-info {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
	}
	
	.spa1-text {
		text {
			margin-right: 10rpx;
		}
	}
	
	.tip-text {
		color: #999;
	}
</style>
